/**
 * Created by karl.zheng on 2018/2/28.
 */
import React from 'react'
import { connect } from 'react-redux'
import { initAccounts, initUser } from '../../actions'
import FloatBall from './FloatBall'
import Dragger from './Dragger'
import AlertBox from './AlertBox'
import { winResize, resizefn } from '../../config/requires'
import { api } from '../../config/index'
require('./index.css')






class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			x: 0,
			y: 0,
			direct: "right",
			showAlert: false
		};
		// this.loadWin = this.loadWin.bind(this);
		this.onDrag = this.onDrag.bind(this);

	}

	componentWillMount() {
		/**
		 * 适配
		 * */
		winResize();
		resizefn();

		let link = window.location.href.split(/[?#]/)[1];
		let params = link.split("&");
		let data = {};
		params.map(key => {
			let str = key.split('=');
			data[str[0]] = str[1];
		});

		var account = localStorage.account ? JSON.parse(localStorage.account) : {};
		if (account.token && account.token == data.token) {
			window.location = api.direct_uri;
		}

		let users = localStorage.users ? JSON.parse(localStorage.users) : [];
		let user = data.userId ? data : {};
		this.props.initUsers(users);
		this.props.initAccount(user);
	}

	onDrag(e, x, y) {
		this.setState({
			x: x,
			y: y,
		})
	}

	render() {
		return (
			<div className="container">
				<div>
					<Dragger style={{ x: 0, y: 200 }} onDrag={this.onDrag}>
						<FloatBall />
					</Dragger>
				</div>
				<AlertBox />
				{this.props.children}
			</div>
		)
	}
}

const mapStateToProps = (state) => ({
	accounts: state.accounts,
	user: state.user
})

const mapDispatchToProps = (dispatch) => ({
	initUsers: (users) => {
		dispatch(initAccounts(users));
	},
	initAccount: (account) => {
		dispatch(initUser(account))
	}
})

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(App);




